<template>
    <div>
        <el-card class="!border-none mt-4" shadow="never">
            <el-descriptions
                title="授权管理"
                class="eldescr"
                :column="1"
                border
            >
                <el-descriptions-item label="绑定账号">{{
                    formData.account
                }}</el-descriptions-item>
                <el-descriptions-item label="站点id">{{
                    formData.site_id
                }}</el-descriptions-item>
                <el-descriptions-item label="授权ip">{{
                    formData.ip
                }}</el-descriptions-item>
                <el-descriptions-item label="授权域名">
                    <el-tag size="small">{{ formData.domain }}</el-tag>
                </el-descriptions-item>
                <!-- <el-descriptions-item label="授权时间"
                    >{{ formData.authorization_time }}
                </el-descriptions-item> -->
                <el-descriptions-item label="授权状态"
                    >{{ formData.authorization_status }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>

        <edit-popup
            v-if="showEdit"
            ref="editRef"
            @success="initAuth"
            @close="showEdit = false"
        />
    </div>
</template>

<script setup lang="ts">
import type { FormInstance } from "element-plus";
import { computed, ref } from "vue";
import EditPopup from "./am_popup.vue";
import cache from "@/utils/cache";
import axios from "axios";
import { ElMessage } from "element-plus";
import { getAuthorizationManagement } from "@/api/cloudupdate";

const configData = cache.get("configData");
interface cloudApInterface {
    password: string;
    account: string;
    token: string;
    site_id: string;
}
const cloud_ap: cloudApInterface = cache.get("cloud_ap");
const showEdit = ref(false);
const editRef = shallowRef<InstanceType<typeof EditPopup>>();

const formData = reactive({
    account: "",
    site_id: "",
    ip: "",
    domain: "",
    authorization_time: "",
    authorization_status: "",
});

onMounted(async () => {
    initAuth(cloud_ap);
    nextTick(() => {
        // handleExpand()
    });
});
const initAuth = async (cloud_ap: cloudApInterface) => {
    await getAuthorizationManagement({})
        .then((res) => {
            // cache.set(
            //     "cloud_ap",
            //     Object.assign(
            //         {},
            //         cloud_ap,
            //         { token: res.token },
            //         { site_id: res.site_id }
            //     )
            // );
            // formData.account = cloud_ap.account;
            formData.account = res.account;
            formData.site_id = res.site_id;
            formData.ip = res.ip;
            formData.domain = res.domain;
            formData.authorization_time = res.authorization_time;
            formData.authorization_status = res.authorization_status;
        })
        .catch((ret) => {});
};
const size = ref("");
const blockMargin = computed(() => {
    const marginMap = {
        large: "32px",
        default: "28px",
        small: "24px",
    };
    return {
        marginTop: marginMap[size.value] || marginMap.default,
    };
});
</script>

<style lang="scss" scoped>
.el-descriptions {
    margin-top: 20px;
}
.eldescr {
    :deep(.el-descriptions__label) {
        width: 100px;
    }
}
</style>
